<template>
	<view>
		<!-- 图片背景 -->
		<ker-navbar
			v-if="!isOpcity"
			title="测试"
			background="none"
			titleColor="#00aaff"
			:borderShow="true"
			:textLeft = 'false'
			:defaultImg="img"
			@cb="hhh"
			>
		<view slot="titleSlot">
			<input type="text" value="" placeholder="搜索内容" class="navbar_input" style="padding: 0 20rpx; box-sizing: border-box;" />
		</view>
		<view slot="bottom" style="height: 100rpx; display: flex; justify-content: center;">
			<input type="text" value="" placeholder="搜索框" class="navbar_input" style="padding: 0 20rpx; box-sizing: border-box;"  />
			</view>
		</ker-navbar>
		
		<!-- 渐变背景 -->
		<ker-navbar
			v-else
			title="测试"
			:background="backgroundImage"
		>
		</ker-navbar>

		<view class="" style="height: 1000px; background: #ffffff; padding-top: 30rpx;" >
			<view style="text-align: center;" v-if="isOpcity">向上滑动屏幕</view>
			<view class="radio_box">
				<radio-group @change="radioChange" class="auto_radio">
					<label v-for="(item, index) in radioList" :key="index" class="label_panel">
						<view>
						 <radio :value="item.val" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<go-top ref="goTopDom" :isIcon="true">
			<view></view>
		</go-top>
	</view>
</template>

<script>
	import kerNavbar from "@/components/ker-navbar/ker-navbar"
	import goTop from '@/components/ker-go-top/ker-go-top'
	export default {
		components:{ 
			kerNavbar,
			goTop
		},
		data() {
			return {
				background: "#1296db",
				topPadding: 0,
				img: '../../static/tfgg-verify/2.jpg',
				isOpcity: false,
				backgroundImage: 'rgba(0,0,0,0)',
				radioList: [
					{ val: 'img', name: '图片背景'},
					{ val: 'opcity', name: '渐变色背景'}
				],
				current: 0
			}
		},
		onPageScroll: function(e){
		 this.$refs.goTopDom.init(e.scrollTop);
			 if(0<= e.scrollTop && e.scrollTop< 50){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0, 0.1),rgba(255, 170, 127, 0.0));'
			 }else if(50<= e.scrollTop && e.scrollTop< 100){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.2),rgba(255, 170, 127,0.2));'
			 }else if(100 <= e.scrollTop && e.scrollTop< 200){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.4),rgba(255, 170, 127,0.4));'
			 }else if(200 <= e.scrollTop && e.scrollTop< 300){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.6),rgba(255, 170, 127,0.6));'
			 }else if(300 <= e.scrollTop && e.scrollTop< 400){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.7),rgba(255, 170, 127,0.7));'
			 }else if(400 <= e.scrollTop && e.scrollTop< 500){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.8),rgba(255, 170, 127,0.8));'
			 }else if(500 <= e.scrollTop && e.scrollTop< 600){
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,0.9),rgba(255, 170, 127,0.9));'
			 }else{
			   this.backgroundImage='linear-gradient(to right,rgba(255, 85, 0,1),rgba(255, 170, 127,1));'
			 }
		},
		
		
		
		
		methods: {
			/* 子组件传来的值 */
			hhh(e) {
				// console.log(e)
			},
			radioChange(e) {
				if(e.detail.value ==='img'){
					this.current = 0;
					this.isOpcity = false;
				} else{
					this.current = 1;
					this.isOpcity = true;
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar{
		width: 0!important;
		height: 0!important;
		color: transparent!important;
		display: none;
	}
.navbar_input{
	width: 50vw;
	height: 60rpx;
	border: 1px solid #dbdbdb;
	border-radius: 90rpx;
	background: #fff;
	margin-left: 60rpx;
}
.radio_box{
	border: 1px solid #ddd;
	background: #EFEFEF;
	margin-top: 30rpx;
	.label_panel{
		padding: 11px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:first-child{
			border-bottom: 1px solid #ddd;
		}
	}
}
</style>
